var config = {
    vx: 4,	//小球x轴速度,正为右，负为左
    vy: 4,	//小球y轴速度
    height: 2,	//小球高宽，其实为正方形，所以不宜太大
    width: 2,
    count: 200,		//点个数
    color: "#c2c2c2", 	//点颜色
    stroke: "#d7d7d7", 		//线条颜色
    dist: 6000, 	//点吸附距离
    e_dist: 20000, 	//鼠标吸附加速距离
    max_conn: 10 	//点到点最大连接数
}

//调用
CanvasParticle(config);

let samaP = document.querySelector('.mydiv-sama-p')
let samaImg = document.querySelector('.mydiv-sama-img')

samaP.addEventListener('mouseover', function () {
    samaImg.style.height = ''
})
//事件委派
let ul = document.querySelector('.mydiv-title ul')
let data = [
    { "count": 4000, "price": 1200, "unitPrice": "0.3000" },
    { "count": 8000, "price": 2000, "unitPrice": "0.2500" },
    { "count": 40000, "price": 8000, "unitPrice": "0.2000" }
]

let dataHtml = ''
data.forEach(function (v, i) {
    //console.log(v);

    dataHtml = `
    <li class="mydiv-selected fl ${i === 0 ? 'active' : ''}" data-price="${v.price}"  data-unit-price="${v.unitPrice}">
     ${v.count}次
    </li>
`
    ul.innerHTML += dataHtml
})
//筛选li
let li = document.querySelectorAll('.mydiv-title ul li')
ul.addEventListener('click', function (e) {
    let bool = e.target.nodeName === 'LI' && e.target.className != 'mydiv-sama'
    //清空所有li类名
    if (bool) {
        for (let i = 0; i < li.length; i++) {
            //ul.children[i].className = ''
            li[i].classList.remove('active')
        }
        //给当前添加激活样式
        e.target.classList.add('active')


        let unitPrice = document.querySelector('.unitprice')
        let mydivMone = document.querySelector('.mydiv-mone1')
        unitPrice.textContent = e.target.dataset.unitPrice
        mydivMone.textContent=e.target.dataset.price
    }
})


//选项卡
let titleLi=document.querySelectorAll('.api-title li')
//console.log(titleLi);
let contDiv=document.querySelectorAll('.div-1')
console.log(contDiv);
let index=0;
titleLi.forEach(function(v,i){
    v.addEventListener('mouseover',function(){
        titleLi[index].classList.remove('akit')
        this.classList.add('akit')
      //先隐藏其他内容
      contDiv[index].classList.remove('on')
      //显示当前菜单对应的内容
      contDiv[i].classList.add ('on')
       index = i
    })
})